Author: Zidane
Web: https://learn-tech-tips.blogspot.com
(Not support IE)
Classic

1

HTML

<div class="classic-1">

CSS 


    [class*=classic]:before {
        content: "Loading...";
    }

    .classic-1 {
        font-weight: bold;
        font-family: sans-serif;
        font-size: 30px;
        padding:0 5px 8px 0;
        background:repeating-linear-gradient(90deg,currentColor 0 8%,#0000 0 10%) 
                    200% 100%/200% 3px no-repeat;
        animation:c3 2s steps(6) infinite;
    }
    @keyframes c3 {to{background-position: 80% 100%}}

Demo

2

HTML

<div class="classic-2">

CSS 

    [class*=classic]:before {
        content: "Loading...";
    }
    .classic-2 {
        font-weight: bold;
        font-family: monospace;
        font-size: 30px;
        clip-path: inset(0 3ch 0 0);
        animation:c4 1s steps(4) infinite;
    }
    @keyframes c4 {to{clip-path: inset(0 -1ch 0 0)}}

Demo

dot

1

HTML

<div class="dots-1">

CSS 

    .dots-1 {
        width: 50px;
        height: 12px;
        background: radial-gradient(circle closest-side, currentColor 90%, #0000) 
                    0 0/33% 100% space;
        clip-path: inset(0 100% 0 0);
        animation: d1 1s steps(4) infinite;
    }

    @keyframes d1 {
        to {
            clip-path: inset(0 -34% 0 0)
        }
    }

Demo

2

HTML

<div class="dots-2">

CSS 

   
.dots-2 {
    width: 50px;
    height: 24px;
    background:
        radial-gradient(circle closest-side,currentColor 90%,#0000) 0%   50%,
        radial-gradient(circle closest-side,currentColor 90%,#0000) 50%  50%,
        radial-gradient(circle closest-side,currentColor 90%,#0000) 100% 50%;
    background-size: calc(100%/3) 12px;
    background-repeat: no-repeat;
    animation: d2 1s infinite linear;
}

@keyframes d2 {
    20% {
        background-position: 0% 0%, 50% 50%, 100% 50%
    }

    40% {
        background-position: 0% 100%, 50% 0%, 100% 50%
    }

    60% {
        background-position: 0% 50%, 50% 100%, 100% 0%
    }

    80% {
        background-position: 0% 50%, 50% 50%, 100% 100%
    }
}

Demo

3

HTML

<div class="dots-3">

CSS 

   
.dots-3 {
	width: 15px;
	aspect-ratio: 1;
	position: relative;
}
.dots-3::before,
.dots-3::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #000;
}
.dots-3::before {
	box-shadow: -25px 0;
	animation: d3-1 1s infinite linear;
}
.dots-3::after {
	transform: rotate(0deg) translateX(25px);
	animation: d3-2 1s infinite linear;
}

@keyframes d3-1 {
	100%{transform: translateX(25px)}
}
@keyframes d3-2 {
	100%{transform: rotate(-180deg) translateX(25px)}
}

Demo

infinity

1

HTML

<div class="infinity-1">

CSS 

	
.infinity-1 {
	width:calc(80px / 0.707); /* 0.707 = cos(45deg) */
	height:14px;
	background: repeating-linear-gradient(-45deg, currentColor 0 15px,#0000 0 20px) left/200% 100%;
	animation:i3 2s infinite linear;
}
@keyframes i3 {
	100% {background-position:right}
}

Demo

2

HTML

<div class="infinity-2">

CSS 

	
.infinity-2 {
	width:90px;
	height:12px;
	background: 
		linear-gradient( 90deg,currentColor 50%,#0000 0) 0 0%,
		linear-gradient(-90deg,currentColor 50%,#0000 0) 0 0%;
	background-size: 20px 100%;
	background-repeat: repeat-x;
	animation:i10 1s infinite linear;
}
@keyframes i10 {
	100% {background-position: -20px 0%,20px 0%}
}

Demo

3

HTML

<div class="infinity-3">

CSS 


.infinity-3 {
	width:90px;
	height:14px;
	background: 
		linear-gradient(90deg,#0000 16px, currentColor 0 30px, #0000 0),
		radial-gradient(circle closest-side at 68% 50%, currentColor 92%,#0000),
		conic-gradient(from   45deg at calc(100% - 7px) 50%,currentColor 90deg,#0000 0),
		conic-gradient(from -135deg at 7px 50%,currentColor 90deg,#0000 0);
	background-position: 0 0;
	background-size:calc(3*100%/4) 100%;
	background-repeat: repeat-x;
	animation:i9 2s infinite linear;
}
@keyframes i9 {
	100% {background-position: -300% 0}
}

Demo

Bars

1

HTML

<div class="bars-1">

CSS 

	
.bars-1 {
    width: 45px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#000 0 0);
    background: 
        var(--c) 0%   50%,
        var(--c) 50%  50%,
        var(--c) 100% 50%;
    background-size: 20% 100%;
    animation: b1 1s infinite linear;
}
@keyframes b1 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    33% {background-size: 20% 10% ,20% 100%,20% 100%}
    50% {background-size: 20% 100%,20% 10% ,20% 100%}
    66% {background-size: 20% 100%,20% 100%,20% 10% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}

Demo

2

HTML

<div class="bars-2">

CSS 

	

.bars-2 {
    width: 45px;
    aspect-ratio: 1;
    --c: no-repeat linear-gradient(#000 0 0);
    background: 
        var(--c) 0%   100%,
        var(--c) 50%  100%,
        var(--c) 100% 100%;
    animation: b2 1s infinite linear;
}
@keyframes b2 {
    0%  {background-size: 20% 100%,20% 100%,20% 100%}
    20% {background-size: 20% 60% ,20% 100%,20% 100%}
    40% {background-size: 20% 80% ,20% 60% ,20% 100%}
    60% {background-size: 20% 100%,20% 80% ,20% 60% }
    80% {background-size: 20% 100%,20% 100%,20% 80% }
    100%{background-size: 20% 100%,20% 100%,20% 100%}
}

Demo

3

HTML

<div class="bars-3">

CSS 

.bars-3 {
    width: 45px;
    aspect-ratio: .75;
    --c: no-repeat linear-gradient(#000 0 0);
    background:
        var(--c) 0% 100%,
        var(--c) 50% 100%,
        var(--c) 100% 100%;
    background-size: 20% 65%;
    animation: b3 1s infinite linear;
}

@keyframes b3 {
    16.67% {
        background-position: 0% 0%, 50% 100%, 100% 100%
    }

    33.33% {
        background-position: 0% 0%, 50% 0%, 100% 100%
    }

    50% {
        background-position: 0% 0%, 50% 0%, 100% 0%
    }

    66.67% {
        background-position: 0% 100%, 50% 0%, 100% 0%
    }

    83.33% {
        background-position: 0% 100%, 50% 100%, 100% 0%
    }
}

Demo

Spinner

1

HTML

<div class="spinner-1">

CSS 

.spinner-1 {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid;
    border-color: #000 #0000;
    animation: s1 1s infinite;
}
@keyframes s1 {to{transform: rotate(.5turn)}}

Demo

2

HTML

<div class="spinner-2">

CSS 

.spinner-2 {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 8px solid lightblue;
    border-right-color: orange;
    animation: s2 1s infinite linear;
}
@keyframes s2 {to{transform: rotate(1turn)}}

Demo

3

HTML

<div class="spinner-3">

CSS 


.spinner-3 {
    width: 50px;
    --b: 8px; /* the border thickness */
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(#0000 10%,#f03355) content-box;
    -webkit-mask:
        repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),
        radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    animation:s3 1s infinite steps(10);
}
@keyframes s3 {to{transform: rotate(1turn)}}

Demo

4

HTML

<div class="spinner-4">

CSS 

 

.spinner-4 {
    width: 50px;
    aspect-ratio: 1;
    --_c: radial-gradient(farthest-side,#25b09b 92%,#0000);
    background: 
      var(--_c) top,
      var(--_c) left,
      var(--_c) right,
      var(--_c) bottom;
    background-size: 12px 12px;
    background-repeat: no-repeat;
    animation: s4 1s infinite;
}
@keyframes s4 {to{transform: rotate(.5turn)}}

Demo

5

HTML

<div class="spinner-5">

CSS 

 

.spinner-5 {
    width: 50px;
    aspect-ratio: 1;
    color: #f03355;
    --_c: no-repeat radial-gradient(farthest-side,currentColor 92%,#0000);
    background: 
        var(--_c) 50% 0   /12px 12px,
        var(--_c) 50% 100%/12px 12px,
        var(--_c) 100% 50%/12px 12px,
        var(--_c) 0    50%/12px 12px,
        var(--_c) 50%  50%/12px 12px,
        conic-gradient(from 90deg at 4px 4px,#0000 90deg,currentColor 0)
        -4px -4px/calc(50% + 2px) calc(50% + 2px);
    animation: s5 1s infinite linear;
}
@keyframes s5 {to{transform: rotate(.5turn)}}

Demo

The continuous

1

HTML

<div class="continuous-1">

CSS 

.continuous-1 {
    width: 120px;
    height: 20px;
    background: 
        linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat 
        lightblue;
    animation: ct1 1s infinite linear;
}

@keyframes ct1 {
    100% {background-position: right -50px top 0}
}

Demo

2

HTML

<div class="continuous-2">

CSS 


.continuous-2 {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: white;
    border: 2px solid;
    position: relative;
    overflow: hidden;
}
    
.continuous-2::before {
    content: "";
    position: absolute;
    margin: 2px;
    width: 14px;
    top: 0;
    bottom: 0;
    left: -20px;
    border-radius: inherit;
    background: currentColor;
    box-shadow: -10px 0 12px 3px currentColor;
    clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
    animation: ct2 1s infinite linear;
}
    
@keyframes ct2 {
    100% {left: calc(100% + 20px)}
}

Demo

3

HTML

<div class="continuous-3">

CSS 

 
.continuous-3 {
    width:120px;
    height:20px;
    -webkit-mask:linear-gradient(90deg,#000 70%,#0000 0) left/20% 100%;
    background:
     linear-gradient(#000 0 0) left -25% top 0 /20% 100% no-repeat
     #ddd;
    animation:ct3 1s infinite steps(6);
  }
  @keyframes ct3 {
      100% {background-position: right -25% top 0}
  }

Demo

4

HTML

<div class="continuous-4">

CSS 

 
.continuous-4 {
    width: 120px;
    height: 20px;
    background: linear-gradient(#514b82 0 0) left -40px top 0/40px 100% no-repeat #eee;
    -webkit-mask:
      linear-gradient(#000 0 0) top   /100% 5px no-repeat,
      linear-gradient(#000 0 0) bottom/100% 5px no-repeat,
      repeating-linear-gradient(90deg,#000 0 5px, #0000 0 20%) left/calc(100% - 5px) 100%;
    animation: ct4 1s infinite linear;
}

@keyframes ct4 {
  100% {background-position: right -40px top 0}
}

Demo

The Progress

1

HTML

<div class="progress-1">

CSS 


.progress-1 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
        linear-gradient(orange 0 0) 0/0% no-repeat lightblue;
    animation: p1 2s infinite steps(10);
}

@keyframes p1 {
    100% {
        background-size: 110%
    }
}

Demo

2

HTML

<div class="progress-2">

CSS 

.progress-2 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
        repeating-linear-gradient(135deg, #f03355 0 10px, #ffa516 0 20px) 0/0% no-repeat,
        repeating-linear-gradient(135deg, #ddd 0 10px, #eee 0 20px) 0/100%;
    animation: p2 2s infinite;
}

@keyframes p2 {
    100% {
        background-size: 100%
    }
}

Demo

3

HTML

<div class="progress-3">

CSS 

 

.progress-3 {
    width: 80px;
    height: 40px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    padding: 3px;
    background:
        repeating-linear-gradient(90deg, currentColor 0 10px, #0000 0 15px) 0/0% no-repeat content-box content-box;
    position: relative;
    animation: p3 2s infinite steps(6);
}

.progress-3::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 100%;
    width: 10px;
    background:
        linear-gradient(#0000 calc(50% - 7px), currentColor 0 calc(50% - 5px),
            #0000 0 calc(50% + 5px), currentColor 0 calc(50% + 7px), #0000 0) left /100% 100%,
        linear-gradient(currentColor calc(50% - 5px), #0000 0 calc(50% + 5px), currentColor 0) left /2px 100%,
        linear-gradient(#0000 calc(50% - 5px), currentColor 0 calc(50% + 5px), #0000 0) right/2px 100%;
    background-repeat: no-repeat;
}

@keyframes p3 {
    100% {
        background-size: 120%
    }
}

Demo

4

HTML

<div class="progress-4">

CSS 

 

.progress-4 {
    width: 120px;
    height: 24px;
    -webkit-mask:
        radial-gradient(circle closest-side, #000 94%, #0000) 0 0/25% 100%,
        linear-gradient(#000 0 0) center/calc(100% - 12px) calc(100% - 12px) no-repeat;
    background:
        linear-gradient(#25b09b 0 0) 0/0% no-repeat #ddd;
    animation: p4 2s infinite linear;
}

@keyframes p4 {
    100% {
        background-size: 100%
    }
}

Demo

5

HTML

<div class="progress-5">

CSS 

 

.progress-5 {
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background:
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
        radial-gradient(var(--r1) var(--r2) at bottom, #269af2 79.5%, #0000 80%),
        radial-gradient(var(--r1) var(--r2) at top, #0000 79.5%, #269af2 80%),
        #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%, 0% 0%, 100% 0%;
    background-repeat: no-repeat;
    animation: p5 2s infinite linear;
}

@keyframes p5 {
    33% {
        background-position: 0% 33%, 100% 33%, 200% 33%
    }

    66% {
        background-position: -100% 66%, 0% 66%, 100% 66%
    }

    100% {
        background-position: 0% 100%, 100% 100%, 200% 100%
    }
}

Demo

The Wobbling

1

HTML

<div class="wobbling-1">

CSS 


.wobbling-1 {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
        radial-gradient(farthest-side, orange 94%, #0000) left/20px 20px no-repeat lightblue;
    animation: w1 1s infinite linear;
}

@keyframes w1 {
    50% {
        background-position: right
    }
}

Demo

2

HTML

<div class="wobbling-2">

CSS 

.wobbling-2 {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: white;
    border: 2px solid;
    position: relative;
}

.wobbling-2::before {
    content: "";
    position: absolute;
    margin: 2px;
    width: 25%;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: currentColor;
    animation: w2 1s infinite linear;
}

@keyframes w2 {
    50% {
        left: 100%;
        transform: translateX(calc(-100% - 4px))
    }
}

Demo

3

HTML

<div class="wobbling-3">

CSS 

 
.wobbling-3 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(at 30% 30%, #0000, #000a) lightblue;
    position: relative;
    left: 0px;
    top: 0px;
    animation:
        w3-1 0.6s,
        w3-2 0.3s;
    animation-timing-function: cubic-bezier(.5, -200, .5, 200);
    animation-iteration-count: infinite;
}

@keyframes w3-1 {
    100% {
        left: 1px;
    }
}

@keyframes w3-2 {
    100% {
        top: 0.3px;
    }
}

Demo

4

HTML

<div class="wobbling-4">

CSS 

 
.wobbling-4{
    width:20px;
    height:20px;
    border-radius:50%;
    position: relative;
    transform-origin:50% -200%;
    background:radial-gradient(at 30% 30%,rgba(243, 238, 238, 0.874),rgba(232, 226, 226, 0.667)) lightgreen;
    animation: w4 1s cubic-bezier(.5,-200,.5,200) infinite;
}
.wobbling-4.classic-2 {
    content: "";
    position: absolute;
    inset:-200% 8px 100%;
    background: yellow; 
}
@keyframes w4 { 
     100% { transform:rotate(1deg)} 
}

Demo

The Shapes

1

HTML

<div class="shapes-1">

CSS 

  

.shapes-1 {
    width: 40px;
    height: 40px;
    color: orange;
    background:
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0),
        linear-gradient(currentColor 0 0);
    background-size: 21px 21px;
    background-repeat: no-repeat;
    animation: sh1 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes sh1 {
    0% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%
    }

    33% {
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        width: 60px;
        height: 60px
    }

    66% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0;
        width: 60px;
        height: 60px
    }

    100% {
        background-position: 100% 0, 100% 100%, 0 100%, 0 0
    }
}

Demo

2

HTML

<div class="shapes-2">

CSS 

  
.shapes-2 {
    width: 40px;
    height: 40px;
    color: white;
    position: relative;
    background:
        conic-gradient(from 134deg at top, currentColor 92deg, #0000 0) top,
        conic-gradient(from -46deg at bottom, currentColor 92deg, #0000 0) bottom;
    background-size: 100% 50%;
    background-repeat: no-repeat;
}

.shapes-2:before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from -135deg at top 0 left 22px, #0000, currentColor 1deg 90deg, #0000 0),
        conic-gradient(from -45deg at right 0 top 22px, #0000, currentColor 1deg 90deg, #0000 0),
        conic-gradient(from 45deg at bottom 0 right 22px, #0000, currentColor 1deg 90deg, #0000 0),
        conic-gradient(from 135deg at left 0 bottom 20px, #0000, currentColor 1deg 90deg, #0000 0);
    animation: sh2 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
}

@keyframes sh2 {
    33% {
        inset: -10px;
        transform: rotate(0deg)
    }

    66% {
        inset: -10px;
        transform: rotate(90deg)
    }

    100% {
        inset: 0;
        transform: rotate(90deg)
    }
}

Demo

The Pulsing

1

HTML

<div class="pulsing-1">

CSS 

  

.pulsing-1 {
    width: 65px;
    height: 117px;
    position: relative;
}

.pulsing-1:before,
.pulsing-1:after {
    content: "";
    position: absolute;
    inset: 0;
    background: #ff8001;
    box-shadow: 0 0 0 50px;
    clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);
    ;
}

.pulsing-1:after {
    animation: pl1 1s infinite;
    transform: perspective(300px) translateZ(0px)
}

@keyframes pl1 {
    to {
        transform: perspective(300px) translateZ(180px);
        opacity: 0
    }
}

Demo

2

HTML

<div class="pulsing-2" data-c="💯" >

CSS 

  
.pulsing-2 {
    display: grid;
    font-size: 50px;
}

.pulsing-2:before,
.pulsing-2:after {
    content: attr(data-c);
    grid-area: 1/1;
}

.pulsing-2:after {
    animation: pl2 1s infinite;
}

@keyframes pl2 {
    to {
        transform: scale(1.8);
        opacity: 0
    }
}

Demo